import orderApi from '@/api/orderApi'
import type { IModalDetail } from '@/types/modal'
import type { OrderItem } from '@/types/orderType'
import { formatDate, formatMobile } from '@/utils'
import { Descriptions, Modal, type DescriptionsProps } from 'antd'
import { useImperativeHandle, useState } from 'react'

const DetailOrder = (props: IModalDetail) => {
  const [visible, setVisible] = useState(false)
  const [data, setData] = useState<OrderItem>()
  const handelCancel = () => {
    setVisible(false)
  }
  const getOrder = async (orderId: string) => {
    const res = await orderApi.getOrderDetail(orderId)
    setData(res)
  }
  const open = (orderId: string) => {
    console.log('进入了')
    setVisible(true)
    getOrder(orderId)
  }
  useImperativeHandle(props.mRef, () => {
    return {
      open
    }
  })
  const items: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '城市名称',
      children: data?.cityName
    },
    {
      key: '2',
      label: '车型',
      children: data?.vehicleName
    },
    {
      key: '3',
      label: '用户名称',
      children: data?.userName
    },
    {
      key: '4',
      label: '手机号',
      children: formatMobile(data?.mobile)
    },
    {
      key: '5',
      label: '起始地址',
      children: data?.startAddress
    },
    {
      key: '6',
      label: '结束地址',
      children: data?.endAddress
    },
    {
      key: '7',
      label: '下单金额',
      children: data?.orderAmount
    },
    {
      key: '8',
      label: '支付金额',
      children: data?.userPayAmount
    },
    {
      key: '9',
      label: '司机名称',
      children: data?.driverName
    },
    {
      key: '10',
      label: '司机金额',
      children: data?.driverAmount
    },
    {
      key: '11',
      label: '支付方式',
      children: data?.payType
    },
    {
      key: '12',
      label: '订单状态',
      children: data?.state
        ? {
            1: '进行中',
            2: '已完成',
            3: '超时',
            4: '取消'
          }[data?.state]
        : ''
    },
    {
      key: '13',
      label: '用车时间',
      children: formatDate(data?.useTime)
    },
    {
      key: '14',
      label: '结束时间',
      children: formatDate(data?.endTime)
    }
  ]
  return (
    <Modal width={800} open={visible} title='订单详情' footer={false} onCancel={handelCancel}>
      <Descriptions column={2} items={items} />
    </Modal>
  )
}

export default DetailOrder
